<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--

    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.

-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>CSS Styles Window</title>
<link rel="stylesheet" href="ide.css" title="Oracle BLAFDoc" type="text/css"/>
</head>

<body>
<p><a id="css_visual_CssStylesTC" name="css_visual_CssStylesTC"></a></p>
<div id="NBCSH882"><!-- infolevel="all" infotype="General" --><a id="sthref86" name="sthref86"></a>
<h1>CSS Styles Window</h1>
<a name="BEGIN" id="BEGIN"></a>
<p>The CSS Styles window enables you to edit the declarations of rules for HTML elements and selectors in a CSS file. 
<object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer">
<param name="content" value="http://www.oracle.com/pls/topic/lookup?ctx=nb8200&id=NBDAG2269">
<param name="text" value="<html><u>How?</u></html>">
<param name="textFontSize" value="medium">
<param name="textColor" value="blue">
</object>
</p>
<p>The upper pane of the CSS Styles window displays a list of the rules that are defined in the CSS file and the properties of elements that are selected when you use Inspect mode in the browser.</p>
<p>The lower pane of the CSS Styles window displays a list of the properties and values that are specified in the declarations of a rule.</p>
<p>The CSS Styles window contains the following elements.</p>

<table summary="User interface elements and descriptions" dir="ltr" border="1" width="100%" frame="hsides" rules="groups" cellpadding="3" cellspacing="0">
<col width="24%" />
<col width="*" />
<thead>
<tr align="left" valign="top">
<th align="left" valign="bottom" id="r1c1-t5">Element</th>
<th align="left" valign="bottom" id="r1c2-t5">Description</th>
</tr>
</thead>
<tbody>
<tr align="left" valign="top">
<td align="left" id="r2c1-t5" headers="r1c1-t5">
<p>Selection</p>
</td>
<td align="left" headers="r2c1-t5 r1c2-t5">Click this tab to view the properties of the selected element.
<p>The features in this tab are only available when you run an HTML5 project in a browser with NetBeans integration enabled and the Inspect function is enabled.</p>
</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r3c1-t5" headers="r1c1-t5">
<p>&nbsp;&nbsp;&nbsp;&nbsp;Properties</p>
</td>
<td align="left" headers="r3c1-t5 r1c2-t5">This table displays a list of properties of the selected element..</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r4c1-t5" headers="r1c1-t5">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <img width="16" height="16" src="img/elementstates.png" alt="Style Element States icon" title="Style Element States icon" />&nbsp;Style Element States</p>
</td>
<td align="left" headers="r4c1-t5 r1c2-t5">Click to toggle display of checkboxes for element states.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r5c1-t5" headers="r1c1-t5">
<p>&nbsp;&nbsp;&nbsp;&nbsp;Applied Styles</p>
</td>
<td align="left" headers="r5c1-t5 r1c2-t5">This table displays a list of styles that are applied to the selected element.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r6c1-t5" headers="r1c1-t5">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <img width="16" height="16" src="img/cssnewrule.png" alt="Edit CSS Rules icon" title="Edit CSS Rules icon" /> Edit CSS Rules</p>
</td>
<td align="left" headers="r6c1-t5 r1c2-t5">Click to open the Edit CSS Rules dialog box.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r7c1-t5" headers="r1c1-t5">
<p>Document</p>
</td>
<td align="left" headers="r7c1-t5 r1c2-t5">Click this tab to view the style sheets and CSS rules associated with the current file. Double-click a style sheet to open the stylesheet in the editor. Double-click a rule name to move the insert cursor to the line in the style sheet that contains the rule definition.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r8c1-t5" headers="r1c1-t5">
<p>&nbsp;&nbsp;&nbsp;&nbsp;Filter Text Field</p>
</td>
<td align="left" headers="r8c1-t5 r1c2-t5">Type a string to filter the list of CSS rules and limit the list of displayed rules to the rules that contain the string.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r9c1-t5" headers="r1c1-t5">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <img width="16" height="16" src="img/cssnewrule.png" alt="Edit CSS Rules icon" title="Edit CSS Rules icon" /> Edit CSS Rules</p>
</td>
<td align="left" headers="r9c1-t5 r1c2-t5">Click to open the Edit CSS Rules dialog box.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r10c1-t5" headers="r1c1-t5">
<p>Properties Toolbar</p>
</td>
<td align="left" headers="r10c1-t5 r1c2-t5">Use the icons in the toolbar to modify how the list of properties is displayed and to add new properties to the selected rule.
<p>The name of the selected CSS rule is displayed in the toolbar.</p>
</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r11c1-t5" headers="r1c1-t5">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <img width="16" height="16" src="img/find.gif" alt="Search icon" title="Search icon" /> Filter Items</p>
</td>
<td align="left" headers="r11c1-t5 r1c2-t5">Click to toggle the text field to filter the list of properties.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r12c1-t5" headers="r1c1-t5">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <img width="16" height="16" src="img/cssviewbyupdated.png" alt="Show Set Properties Only icon" title="Show Set Properties Only icon" /> Show Set Properties Only</p>
</td>
<td align="left" headers="r12c1-t5 r1c2-t5">Click to display only the properties that have a specific value.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r13c1-t5" headers="r1c1-t5">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <img width="16" height="16" src="img/cssviewbycategory.png" alt="Show Categorized Properties icon" title="Show Categorized Properties icon" /> Show Categorized Properties</p>
</td>
<td align="left" headers="r13c1-t5 r1c2-t5">Click to display all properties organized by category.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r14c1-t5" headers="r1c1-t5">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <img width="16" height="16" src="img/sortalpha.png" alt="Show All Properties" title="Show All Properties" /> Show All Properties</p>
</td>
<td align="left" headers="r14c1-t5 r1c2-t5">Click to display all properties, listed alphabetically.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r15c1-t5" headers="r1c1-t5">
<p>&nbsp;&nbsp;&nbsp;&nbsp; <img width="16" height="16" src="img/cssnewproperty.png" alt="Add CSS Property icon" title="Add CSS Property icon" /> Add CSS Property</p>
</td>
<td align="left" headers="r15c1-t5 r1c2-t5">Click to open a dialog box that enables you to add properties to the selected rule that is displayed in the lower pane of the window.</td>
</tr>
</tbody>
</table>
<br />
<!-- -->
<p>To delete a rule, click the CSS rule in the toolbar and choose Delete Rule in the popup menu. To delete a property, right-click the property in the list and choose Remove Property in the popup menu.</p>
<a id="NBCSH897" name="NBCSH897"></a>
<hr><p><b>Related Topics</b></p>
<p><i>Developing Applications with NetBeans IDE</i>, 
<object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer">
<param name="content" value="http://www.oracle.com/pls/topic/lookup?ctx=nb8200&id=NBDAG2266">
<param name="text" value="<html><u>&quot;Creating Cascading Style Sheets&quot;</u></html>">
<param name="textFontSize" value="medium">
<param name="textColor" value="blue">
</object>
</p>

<!-- -->
<!-- Start Footer -->


<table summary="" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" width="86%"><a href="legal_notice.htm">
Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements; and to You under the Apache License, Version 2.0.</a>
</td>
</tr>
</table>
<!-- -->
</body>
</html>
